<template>
  <div class="about">
    <el-container>
      <el-aside width="400px">
        <ul >
          <li >姓名：{{name}}</li>
          <li >年龄：{{age}}</li>
          <li>性别:{{gender}}</li>
          <li>学校:{{school}}</li>
        </ul>
      </el-aside>
      <el-container>
        <el-header height>个人信息</el-header>
        <el-main>
          <div class="box">
            <p class="p">信息修改</p>
            <ul>
              <li>姓名：<el-input v-model="name"></el-input></li>
              <li>年龄<el-input v-model="age"></el-input></li>
              <li>性别<el-input v-model="gender"></el-input></li>
              <li>学校：<el-input v-model="school"></el-input></li>
            </ul>
            <el-button @click="saveUserState">保存</el-button>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script >
export default {
  name: "About",
  data() {
    return {
      name: '',
      age: '',
      gender: '',
      school: '',
    }
  },
  mounted () {
    const { name, age, gender, school } = this.$store.state.userState
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.school = school;
  },
  methods: {
    saveUserState () {
      this.$store.commit('setUserState', {
        name: this.name,
        age: this.age,
        gender: this.gender,
        school: this.school
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #e9eef3;
  color: #333;
  height: 200px;
  text-align: center;
  line-height: 60px;
  font-size: 40px;
  padding-top: 60px;
}

.el-aside {
  width: 40%;
  background-color: #696996;
  color: #333;
  text-align: center;
  line-height: 80px;
  padding-top:180px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 40px;
}

body > .el-container {
  margin-bottom: 40px;
}
.box {
  width: 1200px;
  height: 600px;
  border: 2px solid;
  margin: auto;
  margin-top: 5%;
  border-radius: 10px;
}
li {
  list-style: none;
}
.el-input {
  margin-left: 20px;
  width: 260px;
  height: 30px;
}
.p {
  width: 1000px;
  height: 100px;
  font-size: 30px;
  margin-left: 0;
}
</style>
